<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>报障维修</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.status-bar {
				height: 44px;
				background-color: #000;
				color: white;
				display: flex;
				align-items: center;
				padding: 0 15px;
			}

			.header-stat {
				background: #007bff;
				color: white;
				padding: 20px 15px;
				margin-bottom: 15px;
				text-align: center;
			}

			.stat-box {
				background: rgba(255, 255, 255, 0.1);
				padding: 10px 20px;
				border-radius: 10px;
				display: inline-block;
			}

			.repair-module {
				margin-bottom: 15px;
			}

			.status-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 15px;
				padding: 0 15px;
			}

			.status-item {
				text-align: center;
				padding: 15px;
				background: #f8f9fa;
				border-radius: 8px;
			}

			.status-icon {
				font-size: 1.5rem;
				margin-bottom: 5px;
			}

			.red-dot {
				position: absolute;
				top: 5px;
				right: 10px;
				width: 12px;
				height: 12px;
				background: #ff4444;
				border-radius: 50%;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-top: 1px solid #e9ecef;
				padding: 10px 0;
			}

			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid p-0">
			<!-- 顶部统计区域 -->
			<div class="header-stat">
				<div class="stat-box">

					<div class="small">今日申请</div>
					<div class="small">本月申请</div>
				</div>
			</div>

			<!-- 故障维修模块 -->
			<div class="repair-module">
				<div class="d-flex align-items-center mb-3">
					<span class="bg-green-500 px-2 rounded-pill me-2">▎</span>
					<span>故障维修</span>
				</div>
				<div class="d-flex justify-content-center">
					<a href="YuYueWeiXiu.html">
						<div class="text-center">
							<i class="bi bi-wrench-adjustable status-icon text-primary"></i>
							<div>报修</div>
						</div>
					</a>
				</div>
			</div>

			<!-- 工单状态 -->
			<div class="status-grid">
				<a href="ChuLiZhong.html">
					<div class="status-item position-relative">
						<i class="bi bi-arrow-clockwise status-icon text-success"></i>
						<div>处理中</div>

					</div>
				</a>
				<a href="DaiPaiDan.html">
					<div class="status-item position-relative">
						<i class="bi bi-journal status-icon text-primary"></i>
						<div>代派单</div>

					</div>
				</a>

				<a href="DaiZhiFu.html">
					<div class="status-item position-relative">
						<i class="bi bi-cash status-icon text-danger"></i>
						<div>待支付</div>

					</div>
				</a>
				<a href="">
					<div class="status-item position-relative">
						<i class="bi bi-arrow-clockwise status-icon text-info"></i>
						<div>施工中</div>

					</div>
				</a>
				<a href="YiWanCheng.html">
					<div class="status-item position-relative">
						<i class="bi bi-check-circle status-icon text-warning"></i>
						<div>已完成</div>

					</div>
				</a>
				<a href="YiQuXiao.html">
					<div class="status-item position-relative">
						<i class="bi bi-x-circle status-icon text-purple"></i>
						<div>已取消</div>

					</div>
				</a>

			</div>

			<!-- 底部导航 -->
			<nav class="bottom-nav navbar navbar-light bg-light">
				<div class="container-fluid justify-content-around">
					<a class="navbar-brand" href="YongHuDuan.html">
						<i class="bi bi-house"></i><br>首页
					</a>
					<a class="navbar-brand" href="YuYueWeiXiu.html">
						<i class="bi bi-wrench"></i><br>报障维修
					</a>
					<a class="navbar-brand" href="ChuLiZhong.html">
						<i class="bi bi-person"></i><br>我的
					</a>
				</div>
			</nav>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
	</body>
</html>